<!--
 * @Author: ${author}
 * @Date: ${date}
-->
<!-- 空间 -->
<template>
  <div>
    <el-container>
      <el-header>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input v-model="formInline" placeholder="请输入公司名" style="width: 350px;"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="addRole('添加')">新建</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main>
        <el-table ref="multipleTable" :data="CopytableData" tooltip-effect="dark" style="width: 100%" height="75vh"
          :border="true" @selection-change="handleSelectionChange">
          <el-table-column label="序号" type="index"></el-table-column>
          
          <#list tableInfo.fields as field>
          <#if field.propertyName != "Uuid" && field.propertyName != "Version" >
            <el-table-column prop="${field.propertyName?uncap_first}" label="${field.comment}"></el-table-column>
          </#if>
          </#list>

          <el-table-column label="操作" width="200" fixed="right">
            <template slot-scope="row">
              <el-tag type="success" @click="addRole('修改', row.row)">修改</el-tag>
              <el-tag @click="del(row.row)">删除</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer>
        <!-- 分页 -->
        <div class="paging">
          <template>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="0"
              :page-sizes="[5, 10, 15, 20]" layout="total, sizes, prev, pager, next, jumper"
              :total="total"></el-pagination>
          </template>
        </div>
      </el-footer>
    </el-container>
    <!-- 新建 -->
    <el-dialog :title="identification == false ? '新建' : '修改'" :visible.sync="dialogFormVisible">
      <el-form :model="form" status-icon ref="form">
      
        <#list tableInfo.fields as field>
        <#if field.propertyName != "Uuid" && field.propertyName != "Version" >
          <el-form-item label="${field.comment}" :label-width="formLabelWidth" prop="${field.propertyName?uncap_first}">
            <el-input v-model="form.${field.propertyName?uncap_first}" autocomplete="off"></el-input>
          </el-form-item>
          </#if>
        </#list>
        
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="OktoAddRole(form)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: 'HOSIndex',

  data() {
    
    return {
      // 判断新建还是修改的标识
      identification: false,
      formInline: '',
      tableData: [],
      CopytableData: [],
      multipleSelection: [],
      dialogFormVisible: false,
      form: {
          <#list tableInfo.fields as field>
            <#if field.propertyName != "Version" >
              ${field.propertyName?uncap_first}: '', // ${field.comment}
            </#if>
          </#list>
      },
      formLabelWidth: '120px',
      forms: {},
      // ----------------分页
      paging: {
        orderByField: "",
        outField: "",
        pageIndex: 0,
        pageSize: 10,
        queryColumn: [
        ]
      },
      pageSize: 10,
      pagenum: 1,
      total: 0
    }
  },

  mounted() {

  },
  created() {
    this.getAllList(this.paging)
  },

  methods: {
    // 获取复选框选中的数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 全部数据
    getAllList(data) {

      this.$_api.datacenterApi.Post({
        url: '${entity?uncap_first}/listPageByWhere',
        data: data
      }).then(res => {
        console.log(res, '空间');
        this.CopytableData = res.data
        this.total = res.data.total
      })
    },
    // 新建
    addRole(value, row) {
      if (value == '添加') {
        this.dialogFormVisible = true
        this.identification = false
        this.form.uuid = ''
        <#list tableInfo.fields as field>
        <#if field.propertyName != "Version" >
          this.form.${field.propertyName?uncap_first} = '' // ${field.comment}
          </#if>
        </#list>
      } else {
        this.dialogFormVisible = true
        this.identification = true
        this.form = row
      }
    },

    // 弹窗确定按钮
    OktoAddRole() {
      this.$refs.form.validate(valid => {

        if (valid) {
          console.log(this.identification);
          if (this.identification == false) {

            this.$_api.datacenterApi.Post({
              url: '${entity?uncap_first}',
              data: this.form,
            }).then(res => {


              if (res.code == 200) {
                this.$message({
                  message: '新建成功',
                  type: 'success'
                })
                this.dialogFormVisible = false
                this.getAllList(this.paging)
              } else {
                this.$message.error('新建失败')
              }
            })

          } else {
            this.$_api.datacenterApi.Put({
              url: '${entity?uncap_first}',
              data: this.form
            }).then(res => {
              console.log(res)
              if (res.code == 200) {
                this.getAllList(this.paging)
                this.$message({
                  message: '修改成功',
                  type: 'success'
                })
                this.dialogFormVisible = false
              } else {
                this.$message.error('修改失败')
              }
            })
          }

        }
      })
    },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该条数数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {

          this.$_api.datacenterApi.Del({
            url: '${entity?uncap_first}',
            data: {
              uuid: row.uuid
            }
          }).then(res => {

            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getAllList(this.paging)
          })

        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },

    //  每页条数
    handleSizeChange(val) {
      this.paging.pageSize = val
      this.getAllList(this.paging)
    },

    // 一共多少页
    handleCurrentChange(val) {
      this.paging.pageIndex = val - 1
      this.getAllList(this.paging)
    },
    // 搜索
    search() {
      let a = {
        columnName: 'TenantName',
        columnValue: this.formInline,
        comparisonOperators: 'Like',
        leftValue: '%',
        logicalConnector: 'And',
        paraName: 'tenantName',
        rightValue: '%',
        tableAlias: 't',
        whereStr: ''
      }

      this.paging.queryColumn.push(a)

      this.getAllList(this.paging)

    }
  }
}
</script>

<style lang="scss" scoped>
.el-tag {
  cursor: pointer;
  margin-left: 5px;
}

.demo-form-inline {
  margin-top: 20px;
  height: 50px;
}

// ----------修改elementui表格的默认样式-----------

::v-deep {
  .el-table__body-wrapper {
    &::-webkit-scrollbar {
      // 整个滚动条
      width: 0; // 纵向滚动条的宽度
      background: rgba(213, 215, 220, 0.3);
      border: none;
    }

    &::-webkit-scrollbar-track {
      // 滚动条轨道
      border: none;
    }
  }
}
</style>
